<template>
    <div v-loading="loading" element-loading-text="拼命加载中">

        <div class="content_top">
            <el-row>
                <el-col :span="20">
                    <el-form :inline="true" size="mini" label-width="10px;">
                        <el-form-item label="姓名:">
                            <el-input v-model="condition.userName" class="form-item"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号:">
                            <el-input v-model="condition.phone" class="form-item"></el-input>
                        </el-form-item>
                        <el-form-item label="申请时间:">
                            <el-date-picker v-model="condition.dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="状态:">
                            <el-select size="mini" placeholder="请选择" class="form-item" v-model="condition.siteStatus">
                                <el-option label="全部" :value="0"></el-option>
                                <el-option label="启用" :value="1"></el-option>
                                <el-option label="停用" :value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-button icon="el-icon-search" type="primary" size="mini" @click="loadList">查 询&nbsp;&nbsp;</el-button>
                    </el-form>
                </el-col>
            </el-row>
        </div>

        <el-table :data="data.data" border stripe highlight-current-row style="width: 100%" size="mini">
            <el-table-column type="index" header-align="center" align="center" width="50px"/>
            <el-table-column prop="siteName" label="姓名" header-align="center" align="center" width="150px;"/>
            <el-table-column prop="phone" label="手机号" header-align="center" align="center" width="150px;"/>
            <el-table-column prop="siteApplyTime" label="审核时间" header-align="center" align="center"/>
            <el-table-column prop="customerCount" label="顾客数" header-align="center" align="center"/>
            <el-table-column prop="balance" label="钱包余额" header-align="center" align="center">
                <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="onShowWallet(scope.row)">{{ scope.row.balance }}</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="totalFee" label="总佣金" header-align="center" align="center"/>
            <el-table-column prop="action" fixed="right" label="操作" header-align="center" align="center" width="120px;">
                <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="onUpdateSiteStatus(scope.row, 2)" v-if="scope.row.siteStatus === 1">停用</el-button>
                    <el-button type="text" size="mini" @click="onUpdateSiteStatus(scope.row, 1)" v-if="scope.row.siteStatus === 2">启用</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="content_bottom" style="text-align: center">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="condition.currentPage" :page-size="condition.pageSize" :total="data.total"
                           :page-sizes="[10, 15, 20, 30, 50, 80, 100]" layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
        </div>

        <el-dialog title="钱包明细" :visible.sync="dialog.visible" width="800px" append-to-body>
            <div v-loading="dialog.loading">
                <el-table :data="dialog.data.data" border stripe highlight-current-row style="width: 100%" size="mini">
                    <el-table-column type="index" header-align="center" align="center" width="50px"/>
                    <el-table-column prop="type" label="类型" header-align="center" align="center" width="60px">
                        <template slot-scope="scope">
                            {{scope.row.type === 1 ? '收入' : '支出'}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="交易名称" header-align="center" align="center" width="150px;"/>
                    <el-table-column prop="amount" label="交易金额" header-align="center" align="center"/>
                    <el-table-column prop="balance" label="钱包余额" header-align="center" align="center"/>
                    <el-table-column prop="datetime" label="交易时间" header-align="center" align="center"/>
                </el-table>

                <div class="content_bottom" style="text-align: center">
                    <el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1"
                                   :current-page="condition.currentPage" :page-size="condition.pageSize" :total="data.total"
                                   :page-sizes="[10, 15, 20, 30, 50, 80, 100]" layout="total, sizes, prev, pager, next, jumper">
                    </el-pagination>
                </div>

            </div>
        </el-dialog>
    </div>

</template>

<script>
    import {getSiteList, updateSiteStatus, getWalletList} from '@/api/site/site'

    export default {
        name: 'site-apply',
        data() {
            return {
                loading: false,
                btnLoading: false,
                condition: {
                    currentPage: 1,
                    pageSize: 30,
                    siteStatus: 0,
                    phone: "",
                    userName: "",
                    dateRange: [],
                    start: null,
                    end: null
                },
                data: {},
                form: {
                    id: null,
                    status: 2,
                    failureReason: ""
                },
                dialog: {
                    visible: false,
                    loading: false,
                    condition: {
                        currentPage: 1,
                        pageSize: 30
                    },
                    data: {},
                }
            }
        },
        computed: {},
        mounted() {
            this.loadList()
        },
        methods: {
            handleSizeChange(val) {
                this.condition.pageSize = val
                this.loadList()
            },
            handleCurrentChange(val) {
                this.condition.currentPage = val
                this.loadList()
            },
            async loadList() {
                this.loading = true
                let params = JSON.parse(JSON.stringify(this.condition))
                if (this.condition.dateRange && this.condition.dateRange.length > 0) {
                    params.start = this.condition.dateRange[0]
                    params.end = this.condition.dateRange[1]
                    params.dateRange = null
                }
                let res = await getSiteList(params)
                this.loading = false
                if (res.code !== "0") return
                this.data = res
            },
            async onUpdateSiteStatus(row, status) {
                this.btnLoading = true;
                let res = await updateSiteStatus({userId: row.userId, siteStatus: status})
                this.btnLoading = false
                if (res.code !== '0') {
                    return this.$notify.error({title: '消息', message: res.message})
                }
                this.dialogVisible = false;
                this.$notify({title: '消息', message: '处理成功', type: 'success'});
                this.loadList()
            },
            onShowWallet(row) {
                this.dialog.visible = true
                this.dialog.condition.siteId = row.userId
                this.loadWalletList();
            },
            handleSizeChange1(val) {
                this.dialog.condition.pageSize = val
                this.loadWalletList()
            },
            handleCurrentChange1(val) {
                this.dialog.condition.currentPage = val
                this.loadWalletList()
            },
            async loadWalletList() {
                this.dialog.loading = true
                let res = await getWalletList(this.dialog.condition)
                this.dialog.loading = false
                if (res.code !== "0") return
                this.dialog.data = res
            },
        }
    }
</script>

<style scoped>
</style>
